<template>
  <div class="foot">
    <div class="footnav">
      <div class="home">
        <i @click="home()" class="iconfont icon-ai-new"></i>
        <span>首页</span>
      </div>
      <div class="my">
          <i @click="my()" class="iconfont icon-wode"></i>
          <span>我的</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    my(){
      this.$router.push({name:"my"})
    },
    home(){
      this.$router.push({name:'home'})
    }
  },
}
</script>

<style scoped>
  .foot{
    position: fixed;
    left:0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: white;
  }
  
  .home,.my{
    text-align: center;
    display: flex;
    flex-direction: column;
    width:50%
  }
  .home i,.my i{
    font-size: 15px;

  }
  .footnav{
    display: flex;
    flex: 1;
  }

  .active{
    color: red;
  }
</style>